<style>
  .p{
    font-size: 36px;
    color: #666;
    line-height: 36px;
    padding: 5px 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }
  .layuiadmin-home2-usernote .layuiadmin-reply {
    display: none;
    position: absolute;
    right: 0;
    bottom: 12px;
  }
  [lay-href], [lay-tips], [nepadmin-event] {
    cursor: pointer;
  }
  .layuiadmin-card-status li>span {
    color: #999;
  }
  li {
    list-style: none;
  }
  .layuiadmin-card-status li p {
    padding-bottom: 10px;
  }
  .layuiadmin-card-status li h3 {
    padding-bottom: 5px;
    font-weight: 700;
  }
  .layuiadmin-card-status li {
    position: relative;
    padding: 10px 0;
    border-bottom: 1px solid #EEE;
  }
  .layuiadmin-card-status li:hover a{
    display: block;
  }

  .layuiadmin-card-status {
    padding: 0 10px 10px;
  }
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
</style>
<div class="layui-fluid" id="VIEW-index" lay-title="首页">
  <div class="nepadmin-pad-tb20">
    <script type="text/html" template>
    <h1 class="nepadmin-lead">欢迎登陆 {{layui.conf.name}}</h1>
    </script>
    <div class="nepadmin-ignore nepadmin-pad-tb10">
      <p>Google Chrome 体验最好，最低兼容到IE8浏览器。</p>
    </div>
  </div>
  <div class="layui-row layui-col-space15">
    <!--<div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          访问量
          <span class="layui-badge layui-bg-blue layuiadmin-badge" style="position: absolute;top: 15px;right: 15px;">周</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font p">9,999,666</p>
          <p>
            总计访问量
            <span class="layuiadmin-span-color" style="position: absolute;right: 15px;">88万 <i class="layui-icon">&#xe66c;</i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          下载
          <span class="layui-badge layui-bg-cyan layuiadmin-badge" style="position: absolute;top: 15px;right: 15px;">月</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">
          <p class="layuiadmin-big-font p">33,555</p>
          <p>
            新下载
            <span class="layuiadmin-span-color" style="position: absolute;right: 15px;">10% <i class="layui-icon">&#xe650;</i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          收入
          <span class="layui-badge layui-bg-green layuiadmin-badge" style="position: absolute;top: 15px;right: 15px;">年</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font p">999,666</p>
          <p>
            总收入
            <span class="layuiadmin-span-color" style="position: absolute;right: 15px;">*** <i class="layui-icon">&#xe659;</i></span>
          </p>
        </div>
      </div>
    </div>
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
          活跃用户
          <span class="layui-badge layui-bg-orange layuiadmin-badge" style="position: absolute;top: 15px;right: 15px;">月</span>
        </div>
        <div class="layui-card-body layuiadmin-card-list">

          <p class="layuiadmin-big-font p">66,666</p>
          <p>
            最近一个月
            <span class="layuiadmin-span-color" style="position: absolute;right: 15px;">15% <i class="layui-icon">&#xe770;</i></span>
          </p>
        </div>
      </div>
    </div>-->
    <div class="layui-col-lg8">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-sm4">
          <div class="nepadmin-linecard">
            <p class="nepadmin-linecard-title">日成交额</p>
            <span class="nepadmin-linecard-text">￥229,200</span>
            <span class="nepadmin-ignore">万元</span>
          </div>
        </div>
        <div class="layui-col-sm4">
          <div class="nepadmin-linecard nepadmin-br-green">
            <p class="nepadmin-linecard-title">日新增用户</p>
            <span class="nepadmin-linecard-text">2468</span>
            <span class="nepadmin-ignore">人</span>
          </div>
        </div>
        <div class="layui-col-sm4">
          <div class="nepadmin-linecard nepadmin-br-red">
            <p class="nepadmin-linecard-title">
              待处理订单
              <a href="#" class="nepadmin-c-blue nepadmin-font-12">立即处理</a>
            </p>
            <span class="nepadmin-linecard-text">￥229,200</span>
            <span class="nepadmin-ignore">万元</span>
          </div>
        </div>
        <div class="layui-col-xs12">
          <div class="layui-row layui-col-space15">
            <div class="layui-col-xs12">
              <div class="layui-card">
                <div class="layui-card-extra nepadmin-c-gray">
                  <span class="nepadmin-c-blue">今日</span>&nbsp;&nbsp;
                  <span>本周</span>&nbsp;&nbsp; <span>本月</span>&nbsp;&nbsp;
                  <span>全年</span>&nbsp;&nbsp;
                </div>
                <div class="layui-tab layui-tab-brief" lay-filter="index-chart">
                  <ul class="layui-tab-title">
                    <li class="layui-this">销售额</li>
                    <li>访问量</li>
                    <li>注册量</li>
                  </ul>
                  <div class="layui-tab-content" style="padding:0;">
                    <div class="layui-tab-item layui-show">
                      <div
                        id="index-echartLine"
                        style="width: 100%;height:400px;"
                      ></div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="layui-card">
                <div class="layui-card-header"><i class="layui-icon layui-icon-username"></i> 用户留言</div>
                <div class="layui-card-body">
                  <ul class="layuiadmin-card-status layuiadmin-home2-usernote">
                    <li>
                      <h3>贤心</h3>
                      <p>作为 layui 官方推出的后台模板，从初版的饱受争议，到后续的埋头丰富，逐步占据了国内后台系统应用的主要市场。</p>
                      <span>5月30日 00:00</span>
                      <a href="javascript:;" nepadmin-event="replyNote" data-id="7" class="layui-btn layui-btn-xs layuiadmin-reply" style="outline: none;">回复</a>
                    </li>
                    <li>
                      <h3>诸葛亮</h3>
                      <p>皓首匹夫！苍髯老贼！你枉活九十有六，一生未立寸功，只会摇唇鼓舌！助曹为虐！一条断脊之犬，还敢在我军阵前狺狺狂吠，我从未见过有如此厚颜无耻之人！</p>
                      <span>5月02日 00:00</span>
                      <a href="javascript:;" nepadmin-event="replyNote" data-id="5" class="layui-btn layui-btn-xs layuiadmin-reply">回复</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="layui-col-lg4">
      <div class="layui-card">
        <div class="layui-card-header">系统信息</div>
        <div class="layui-card-body">
          <p id="day">项目已不间断运行：</p>
          <hr />
          <p>数据库信息：Mysql</p>
          <hr />
          <p id="ip">服务器IP：</p>
          <hr />
          <p id="os">操作系统：</p>
          <hr />
          <p>WEB服务器：Tomcat</p>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">服务器监控</div>
        <div class="layui-card-body">
          <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10 cpu">0.00%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">CPU使用率</span></h2>
            <div class="layui-progress">
              <div class="layui-progress-bar layui-bg-blue" id="cpu" lay-percent="0.00%"></div>
            </div>
          </div>
          <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10 memory">0.00%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">内存占用率</span></h2>
            <div class="layui-progress">
              <div class="layui-progress-bar layui-bg-red" id="memory" lay-percent="0.00%"></div>
            </div>
          </div>
          <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10 disk">0.00%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">磁盘占用率</span></h2>
            <div class="layui-progress">
              <div class="layui-progress-bar layui-bg-cyan" id="disk" lay-percent="0.00%"></div>
            </div>
          </div>
          <div class="nepadmin-pad-b20">
            <h2 class="nepadmin-pad-b10 swap">0.00%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">交换区使用率</span></h2>
            <div class="layui-progress">
              <div class="layui-progress-bar layui-bg-cyan" id="swap" lay-percent="0.00%"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-card">
        <div class="layui-card-header">
          <i class="layui-icon layui-icon-notification-fill"></i> 公告动态
        </div>
        <div class="nepadmin-cell">
          <div class="nepadmin-cell-title">
            广州商X一行将于30日莅临公司考察调研
          </div>
          <div class="nepadmin-cell-extra">09月14日 10:23:21</div>
        </div>
        <div class="nepadmin-cell">
          <div class="nepadmin-cell-title">关于公司人员的调整</div>
          <div class="nepadmin-cell-extra">09月14日 12:11:21</div>
        </div>
        <div class="nepadmin-cell">
          <div class="nepadmin-cell-title">10月国庆新活动~，筹备上线</div>
          <div class="nepadmin-cell-extra">09月14日 13:32:21</div>
        </div>
        <div class="nepadmin-cell">
          <div class="nepadmin-cell-title">转化率统计分析报告</div>
          <div class="nepadmin-cell-extra">08月10日 16:01:02</div>
        </div>
        <div class="nepadmin-cell">
          <div class="nepadmin-cell-title">客服工作中的话语话术分享</div>
          <div class="nepadmin-cell-extra">08月10日 15:53:23</div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/html" id="TPL-index-params">
    {{# layui.each(d.params,function(i,item){ }}
    <span class="layui-badge-rim">{{ item.val }}</span>
    {{# }) }}
  </script>
  <script type="text/html" id="TPL-index-status">
    {{#
        var status = {
            WAIT_PAY:{title:'待付款',color:'blue'},
            WAIT_DELIVER:{title:'待发货',color:'orange'},
            WAIT_REFUND:{title:'待退款',color:'red'},
        }[d.status];
    }}
    <span class="layui-badge layui-bg-{{status.color}}">{{ status.title }}</span>
  </script>
</div>
<script>
        var admin = layui.admin,
            echarts = layui.echarts,
            element = layui.element,
            helper = layui.helper,
            table = layui.table,
            util = layui.util,
            carousel = layui.carousel;
        //链接socket
        //admin.socketConn();
        var $ = layui.jquery,
        device = layui.device();
        //查询服务监控
        monitorQuery();
        //setInterval(monitorQuery(),1500);


        admin.on('replyNote',function (othis) {
            var nid = othis.data('id');
            layer.prompt({
                title: '回复留言 ID:'+ nid
                ,formType: 2
            }, function(value, index){
                //这里可以请求 Ajax
                //…
                layer.msg('得到：'+ value);
                layer.close(index);
            });
        });

        //轮播切换
        $('.layadmin-carousel').each(function(){
            var othis = $(this);
            carousel.render({
                elem: this
                ,width: '100%'
                ,arrow: 'none'
                ,interval: othis.data('interval')
                ,autoplay: othis.data('autoplay') === true
                ,trigger: (device.ios || device.android) ? 'click' : 'hover'
                ,anim: othis.data('anim')
            });
        });

        var view = $('#VIEW-chart-index')
      element.render('progress')

      createChart()

      element.on('tab(index-chart)', function(data) {
        createChart()
      })

      function createChart() {
        var seriesData = []
        var xAxisData = []
        for (var i = 1; i <= 12; i++) {
          var val = helper.rand(8000, 10000)
          seriesData.push(val)
          xAxisData.push((i < 10 ? '0' + i : i) + ':00')
        }
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' }
          },
          xAxis: {
            type: 'category',
            data: xAxisData
          },
          yAxis: {
            max: function(val) {
              return val.max + 400
            },
            min: function(val) {
              return val.min - 400
            },
            type: 'value',
            axisLabel: { formatter: '￥{value}' },
            axisPointer: { snap: true }
          },
          series: [
            {
              name: '时段销售额',
              type: 'line',
              symbolSize: 12,
              lineStyle: {
                normal: {
                  width: 5,
                  shadowColor: '#5a8bff',
                  shadowBlur: 40,
                  shadowOffsetY: 10
                }
              },
              data: seriesData
            }
          ]
        }
        echarts
          .init(document.getElementById('index-echartLine'), 'blue')
          .setOption(option)
      }
        //查询服务监控
      function monitorQuery() {
          admin.get({
              api: 'monitorQuery',
              loading: false,
              success:function (res) {
                  var data = res.data;
                /*系统信息*/
                  $("#day").text("项目已不间断运行："+data.sys.day);
                  $("#ip").text("服务器IP："+data.sys.ip);
                  $("#os").text("服务器系统："+data.sys.os);
                /*cpu*/
                  $(".cpu").html(data.cpu.used + '%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">('+data.cpu.core+')CPU使用率');
                  $("#cpu").attr("lay-percent",data.cpu.used+"%");

                /*内存*/
                  $(".memory").html(data.memory.usageRate+'%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">('+data.memory.used+'/'+data.memory.total+')内存占用率</span>');
                  $("#memory").attr("lay-percent",data.memory.usageRate+"%");

                /*磁盘*/
                  $(".disk").html(data.disk.usageRate+'%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">('+data.disk.used+'/'+data.disk.total+')磁盘占用率</span>');
                  $("#disk").attr("lay-percent",data.disk.usageRate+"%");

                /*交换区*/
                  $(".swap").html(data.swap.usageRate+'%<span class="nepadmin-font-14 nepadmin-c-gray nepadmin-fr">('+data.swap.used+'/'+data.swap.total+')交换区使用率</span>');
                  $("#swap").attr("lay-percent",data.swap.usageRate+"%");

                  element.render('progress')
              }
          });
      }

</script>
